<template>
	<view class="empty-box" :style="'padding:' + padding" :class="{'empty-box-fixed': fixed}">
		<text v-if="type == 'icon'" :class="'empty-icon '+ icon"></text>
		<image v-else class="empty-image" :src="image" :style="{'width':width+'rpx','height': '260rpx;'}"></image>
		<text class="empty-text">
			<slot>暂无数据~</slot>
		</text>
	</view>
</template>
<script>
	export default {
		name: "empty",
		props: {
			type: {
				type: String,
				default: 'image' // image|icon
			},
			icon: {
				type: String,
				default: 'dy-iconfont icon-empty'
			},
			image: {
				type: String,
				default: 'https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/empty.png'
			},
			width: {
				type: Number,
				default: 260
			},
			padding: {
				type: String,
				default: '130rpx 0'
			},
			fixed: {
				type: Boolean,
				default: false
			},

		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.empty-box {
		box-sizing: border-box;

		&.empty-box-fixed {
			position: fixed;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		.empty-image,
		.empty-icon {
			display: block;
			margin: 0 auto 24rpx;
		}

		.empty-image {
			height: 308rpx;
		}

		.empty-icon {
			text-align: center;
			font-size: 150rpx;
			color: $uni-text-color-grey;
		}

		.empty-text {
			display: block;
			text-align: center;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 40rpx;
		}
	}
</style>